<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>ttmoxiaomo</title>
    <link rel="stylesheet" href="__LayUI__/css/layui.css">
    <link rel="stylesheet" href="__Admin__/css/admin.scss">
</head>
<body class="layui-layout-body">
<div id="wonder"></div>
<div class="layui-layout layui-layout-admin">
          <div id="mainContain">
            <div class='layui-row'>
                <form method="post" class='login'>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username" style="font-size: 30px; color: #1E9FFF;"></i> </label>
                    <div class="layui-input-block">
                      <input type="text" name="username" required=""  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password" style="font-size: 30px; color: #1E9FFF;"></i> </label>
                    <div class="layui-input-block">
                      <input type="text" name="password" required=""  placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode" style="font-size: 30px; color: #1E9FFF;"></i> </label>
                    <div class="layui-input-block">
                        <input type="text" name="code" required=""  placeholder="验证码" autocomplete="off" class="layui-input" width="100">

                        <div><img src="{:url('Login/captcha_img')}" onclick="this.src='{:url(\'Login/captcha_img\')}? '+ Math.random();" alt=""></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn" >登录</button>
 
                    </div>
                </div>
                </form>
            </div>
          </div>
</div>
<script src="__LayUI__/layui.js"></script>
<script>
           


            var Dots = function (speed, alpha) {
                // 画布相关
                this.canvas;
                this.ctx;

                // 绘制点相关
                this.x;
                this.y;
                this.r;
                this.a = alpha && alpha > 0 && alpha <= 1 ? alpha : .8;

                // 移动相关
                this.speed = speed && speed > 0 ? speed : 2;
                this.sx;
                this.sy;
                this.isMouseDot = 0;
            };

            Dots.prototype = {
                // 初始化点的方法 x/y为可选参数 为生成点的位置 不传则随机生成
                init: function (canvas, x, y, isMouseDot) {
                    this.canvas = canvas;
                    this.ctx = this.canvas.getContext('2d');

                    this.x = x*2 || Math.random() * this.canvas.width;
                    this.y = y*2 || Math.random() * this.canvas.height;
                    this.r = Math.random() * 6; // 随机生成 <6 的半径值

                    if (isMouseDot) this.isMouseDot = 1;

                    // 随机确定点的移动速度与方向 速度值在 [-this.speed, this.speed) 之间 提高数值可加快速度
                    this.sx = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
                    this.sy = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;

                    this.ctx.beginPath();
                    this.ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
                    this.ctx.fillStyle = 'rgba(255,255,255,'+this.a+')';
                    this.ctx.fill();
                    this.ctx.closePath();
                },

                // 更新点位置
                update: function () {
                    if (this.isMouseDot) return;

                    this.x = this.x + this.sx;
                    this.y = this.y + this.sy;

                    // 点超出canvas范围时另其"重生"
                    if (this.x < 0 || this.x > this.canvas.width) {
                        this.init(this.canvas);
                    }
                    if (this.y < 0 || this.y > this.canvas.height) {
                        this.init(this.canvas);
                    }

                    this.ctx.beginPath();
                    this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2*Math.PI);
                    this.ctx.fillStyle = 'rgba(255,255,255,'+this.a+')';
                    this.ctx.fill();
                    this.ctx.closePath();
                },

                // 跟踪鼠标的点的位置更新 x/y为鼠标位置
                mouseDot: function (x, y) {
                    this.x = x*2;
                    this.y = y*2;
                    this.ctx.beginPath();
                    this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2*Math.PI);
                    this.ctx.fillStyle = 'rgba(255,255,255,'+this.a+')';
                    this.ctx.fill();
                    this.ctx.closePath();
                }
            };

            /**
             * Created by troyxu on 16/12/6.
             */
            function Wonder (opts) {

                var part = document.querySelector(opts.el),
                    canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d'),

                    partStyle = window.getComputedStyle(part, null),
                    width = parseInt(partStyle.width),
                    height = parseInt(partStyle.height),
                    area = width * height, // canvas区域面积
                    cssText = 'width: '+width+'px; height: '+height+'px;';

                canvas.setAttribute('style', cssText);
                canvas.width = (width * 2).toString();
                canvas.height = (height * 2).toString();

                part.appendChild(canvas);

                var dotsArr = [],
                    dotsNum = opts.dotsNumber || parseInt(area / 5000),
                    maxDotsNum = dotsNum * 2,
                    overNum = 0, // 超出最大数量的点的数量
                    dotsDistance = opts.lineMaxLength || 250; // 点之间产生连线的最大距离

                //生成点
                for (var i = 0; i < dotsNum; i ++) {
                    var dot = new Dots(opts.speed, opts.dotsAlpha);
                    if (i < dotsNum - 1) {
                        dot.init(canvas);
                    } else {
                        dot.init(canvas, 0, 0, 1);
                    }
                    dotsArr.push(dot);
                }

                //鼠标事件
                var clickWithNew = opts.clickWithDotsNumber || 5;
                document.addEventListener('click', createDot);
                function createDot(e) {
                    var tx = e.pageX,
                        ty = e.pageY;
                    if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {

                        for (var i = 0; i < clickWithNew; i ++) {
                            var dot = new Dots(opts.speed, opts.dotsAlpha);
                            dotsArr.push(dot);
                            dotsNum += 1;
                            dot.init(canvas, tx, ty);
                        }
                    }
                }
                var mouseDot, mouseDotIndex;
                canvas.addEventListener('mouseenter', mouseDotEnter);
                canvas.addEventListener('mousemove', mouseDotMove);
                canvas.addEventListener('mouseleave', mouseDotLeave);
                function mouseDotEnter(e) {
                    var tx = e.pageX,
                        ty = e.pageY;
                    dot.init(canvas, tx, ty, 1);
                }
                function mouseDotMove(e) {
                    var tx = e.pageX,
                        ty = e.pageY;
                    if ((tx > 0 && tx < width) && (ty > 0 && ty < height)) {
                        dot.mouseDot(tx, ty);
                    }
                }
                function mouseDotLeave(e) {
                    dot.init(canvas);
                }

                //动画与连线
                var requestAnimFrame = requestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame;
                requestAnimFrame(animateUpdate); // 兼容不同浏览器的requestAnimationFrame

                function animateUpdate() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空canvas中原有的内容

                    // 更新点的位置 数量超出最大值时舍弃旧的点
                    if (dotsNum > maxDotsNum) {
                        overNum = dotsNum - maxDotsNum;
                    }

                    for (var i = overNum; i < dotsNum; i ++) {
                        // if (dotsArr[i].isMouseDot) console.log('aaa')
                        if (dotsArr[i]) dotsArr[i].update();
                    }

                    // 绘制连线
                    for (var i = overNum; i < dotsNum; i ++) {
                        for (var j = i + 1; j < dotsNum; j ++) {
                            // if (dotsArr[i].isMouseDot) console.log('bbb')
                                // if (dotsArr[j].isMouseDot) console.log('ccc')
                            var tx = dotsArr[i].x - dotsArr[j].x,
                                ty = dotsArr[i].y - dotsArr[j].y,
                                s = Math.sqrt(Math.pow(tx, 2) + Math.pow(ty, 2));
                            if (s < dotsDistance) {
                                ctx.beginPath();
                                ctx.moveTo(dotsArr[i].x, dotsArr[i].y);
                                ctx.lineTo(dotsArr[j].x, dotsArr[j].y);
                                ctx.strokeStyle = 'rgba(255,255,255,'+(dotsDistance-s)/dotsDistance+')';
                                ctx.strokeWidth = 1;
                                ctx.stroke();
                                ctx.closePath();
                            }
                        }
                    }
                    requestAnimFrame(animateUpdate);
                }
            }
</script>
<script>
    new Wonder({
    el: '#wonder',
    dotsNumber: 100,
    lineMaxLength: 300,
    dotsAlpha: .5,
    speed: 1.5,
    clickWithDotsNumber: 5
})
</script>

</body>
</html>